/**
 * Dear programmer:
 * When I wrote this code, only god and I knew how it worked.
 * Now, only god knows it!
 *
 * @author: Pegasus  Date: 2018/11/21 Time: 10:06
 *
 * 个人中心
 */

import React, {Component} from 'react';
import {
    Modal,
    SafeAreaView, ScrollView, Text, TextInput, TouchableOpacity, View
} from 'react-native';
import {connect} from 'react-redux';
import {styles} from './LocalPhoneNumVerify.Style';

class LocalPhoneNumVerify extends Component {

    static navigationOptions = ({navigation}) => ({
        headerTitle: `验证本机号码`,
    });

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            phoneNum:'', //手机号码
            codeBtnStyle:'verificationCodeBtnDisable', //获取验证码样式(可用：verificationCodeBtnAble，不可用：verificationCodeBtnDisable)
            verificationCode:'', //验证码
            boxBottomBtn:'boxBottomBtnDisable', //提交按钮样式(可用：boxBottomBtnAble，不可用：boxBottomBtnDisable)
            recheckModalVisible:true,
        };
    }

    render() {
        return (
            <SafeAreaView style={styles.body}>
                <View style={styles.promptMessage}>
                    <Text style={styles.promptMessageText}>
                        系统需要知道本机号码，才能给您发送工作短信(只需验证一次)
                    </Text>
                </View>

                <View style={styles.boxContainer} onPress={()=>{
                }}>
                    {/* 本机号码 */}
                    <View style={styles.container}>
                        <Text style={styles.containerName}>
                            本机号码
                        </Text>
                        <TextInput
                            placeholder={'填写本手机号码'}
                            style={styles.phoneNumInput}
                            numberOfLines={1}
                            underlineColorAndroid={'transparent'}
                            onChangeText={text=>{
                                if(text.length===11){
                                    this.setState({
                                        phoneNum:text,
                                        codeBtnStyle:'verificationCodeBtnAble'
                                    })
                                }else{
                                    this.setState({
                                        phoneNum:text,
                                        codeBtnStyle:'verificationCodeBtnDisable'
                                    })
                                }
                            }}
                        />
                        <TouchableOpacity activeOpacity={1} onPress={()=>{

                        }}>
                            <View style={styles[this.state.codeBtnStyle]}>
                                <Text style={styles.verificationCodeBtnText}>
                                    获取验证码
                                </Text>
                            </View>
                        </TouchableOpacity>

                    </View>


                    {/* 验证码 */}
                    <View style={styles.container}>
                        <Text style={styles.containerName}>
                            验证码
                        </Text>
                        <TextInput
                            placeholder={'收到短信后，输入4位验证码'}
                            style={styles.verificationCodeInput}
                            numberOfLines={1}
                            underlineColorAndroid={'transparent'}
                            onChangeText={text=>{
                                if(text.length===4){
                                    this.setState({
                                        verificationCode:text,
                                        boxBottomBtn:'boxBottomBtnAble'
                                    })
                                }else{
                                    this.setState({
                                        verificationCode:text,
                                        boxBottomBtn:'boxBottomBtnDisable'
                                    })
                                }
                            }}
                        />
                    </View>
                </View>

                <TouchableOpacity activeOpacity={0.8} onPress={()=>{

                }}>
                    <View style={styles[this.state.boxBottomBtn]}>
                        <Text style={styles.boxBottomBtnText}>
                            提交
                        </Text>
                    </View>
                </TouchableOpacity>

                <Modal visible={this.state.recheckModalVisible} animationType = {'none'} transparent = {true} onRequestClose={()=>{

                }} >
                    <View style={styles.modalContainer} onPress={()=> this.onRequestClose()}>
                        <View style={styles.checkModalBody}>
                            <View style={styles.checkModalHeader}>
                                <Text style={styles.checkModalHeaderText}>
                                    已验证
                                </Text>
                            </View>
                            <View style={styles.checkModalCenter}>
                                <Text style={{fontSize:18}}>
                                    手机号码为：xxxxxxxxxxx
                                </Text>
                            </View>
                            <View style={styles.checkModalCenter}>
                                <TouchableOpacity  style={styles.checkModalCenterLeft} onPress={()=>{
                                    this.setState({recheckModalVisible:false});
                                }}>
                                    <Text style={{color:'black',fontSize:20}}>
                                        重新验证
                                    </Text>
                                </TouchableOpacity>
                                <TouchableOpacity style={styles.checkModalCenterRight} onPress={()=>{
                                    this.setState({recheckModalVisible:false});
                                    this.props.navigation.navigate('MineScreen')
                                }}>
                                    <Text style={{color:'white',fontSize:20}}>
                                        返回
                                    </Text>
                                </TouchableOpacity>
                            </View>
                        </View>
                    </View>
                </Modal>

            </SafeAreaView>
        )
    }

    onRequestClose(){
        this.setState({
            recheckModalVisible:false
        })
    }
}

const props = state => {
    return {}
};

export default LocalPhoneNumVerify = connect(props)(LocalPhoneNumVerify);